
function getColorPanelX(id){
	return document.getElementById(id).offsetLeft + document.getElementById("divmenu").offsetLeft-1;
}
function getColorPanelY(id){
	return document.getElementById(id).offsetTop + document.getElementById("divmenu").offsetTop+30;
}
var markit_colorTableInited = false;
function initColor(evt) {
	var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
	var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00',
			'00FFFF', 'FF00FF');
	var colorTable = '';
	var i = 0;
	var j = 0;
	var icon = "http://10.131.252.41:8080/edu.fudan.ss.wml.marker.test/icon/transparent.png";
	for (i = 0; i < 2; i++) {
		for (j = 0; j < 6; j++) {
			colorTable = colorTable
						+'<span class="colorRow">'
						+'<input class="colorCell" type="image" src="'+icon+'" alt="AA" style="background-color:#000000">';
			if (i == 0) {
				colorTable = colorTable
						+ '<input class="colorCell choosable" type="image" src="'+icon+'" alt="AA" style="background-color:#'
						+ ColorHex[j] + ColorHex[j] + ColorHex[j]
						+ '" onclick="colorClicked(this.style.backgroundColor)"/>';
			} else {
				colorTable = colorTable
						+ '<input class="colorCell choosable" type="image" src="'+icon+'" alt="AA" style="background-color:#'
						+ SpColorHex[j]
						+ '" onclick="colorClicked(this.style.backgroundColor)"/>';
			}
			colorTable = colorTable
					+ '<input class="colorCell" type="image" src="'+icon+'" alt="AA" style="background-color:#000000"/>';
			var k = 0;
			var l = 0;
			for (k = 0; k < 3; k+=2) {
				for (l = 0; l < 6; l++) {
					colorTable = colorTable
							+ '<input class="colorCell choosable" type="image" src="'+icon+'" alt="AA" style="background-color:#'
							+ ColorHex[k + i * 3]
							+ ColorHex[l]
							+ ColorHex[j]
							+ '" onclick="colorClicked(this.style.backgroundColor)"/>';
				}
			}
			colorTable+="</span><br/>";
		}
	}
	colorTable = '<span id="colorTitle">Theme Colors</span>'
			+ '<span id="colorCloseBtn" onclick="colorClose()"></span><br>'
			+ colorTable;
	markit_colorTableInited = true;
	
	var cp = document.createElement("div");
	cp.setAttribute("id", "colorPanel");
	cp.setAttribute("onblur", "colorClose()");
	cp.setAttribute("contentEditable",false);
	var id = markit_colorType==1?"idForeColor":"idBackColor";
	cp.style.top = getColorPanelY(id)+"px";
	cp.style.left = getColorPanelX(id)+"px";
	
	cp.innerHTML = colorTable;
	document.body.appendChild(cp);

}
function colorClicked(obj) {
	if(markit_colorType==1)
		changeStyle('ForeColor',false,obj,1);
	else
		changeStyle('BackColor',false,obj,1);
	colorClose();
}

function colorClose() {
	markit_colorType=0;
	if(document.getElementById("colorPanel")==null)
		return;
	document.getElementById("colorPanel").style.display= "none";
}

var markit_colorType = 0;
function colorOpen(event,c) {
	if(markit_colorType!=0){
		colorClose();
		return;
	}
	markit_colorType = c;
	if (!markit_colorTableInited){
		initColor();
	}else{
		var cp = document.getElementById("colorPanel");
		cp.style.display= "block";
		var id = markit_colorType==1?"idForeColor":"idBackColor";
		cp.style.top = getColorPanelY(id)+"px";
		cp.style.left = getColorPanelX(id)+"px";
	}
}